<template>
  <div class="workflow-container">
    <OfficeFlow
      :add-nodes="adddata"
      :node="cnode"
      @on-add="onAdd"
      @on-choose="onChoose"
    />
    <div>
      <el-drawer
        v-model="popupshow"
        class="mask-popup"
        :show-close="false"
        :with-header="false"
      >
        <div class="mask-popup-div">
          <choose-approval
            v-if="popupshow"
            :conditions-data="conditionsData"
            :node-data="nodeData"
            @on-cancel="popupshow = false"
            @on-enter="onenter"
          />
        </div>
      </el-drawer>
    </div>
    <div class="workflow-button">
      <el-button type="primary" @click="onSubmit">保存</el-button>
    </div>
  </div>
</template>

<script>
  import { OfficeFlow, FlowValidate } from 'approval-flow'
  import chooseApproval from './components/choose-approval.vue'
  import { WorkFlowGetwfinfo, addSaveList } from '@/api/form'
  // import chooseCondition from './components/choose-condition.vue'
  import 'approval-flow/approval-flow.css'
  import { gp } from '@gp'
  export default defineComponent({
    name: 'Workflow',
    components: {
      OfficeFlow,
      chooseApproval,
      // chooseCondition,
    },
    // 原始数据
    data() {
      return {
        adddata: [
          {
            key: 'approver',
            value: '审批人',
            icon: 'Stamp',
            color: '#3d91eb',
          },
          {
            key: 'notifier',
            value: '抄送人',
            icon: 'Promotion',
            color: 'orange',
          },
          {
            key: 'condition',
            value: '条件分支',
            icon: 'Branch',
            color: '#333',
          },
        ],
        cnode: {
          name: '提交人',
          type: 'start',
          nodeName: '',
          inputname: '',
          index: 0,
          properties: {
            // 数据可以存放到properties对象里面
          },
        },
        popupshow: false,
        nodeData: {},
        conditionsData: [],
        info: {},
      }
    },
    created() {},
    activated() {
      console.log(this.$route)
      this.cnode = {
        name: '提交人',
        type: 'start',
        nodeName: '',
        inputname: '',
        properties: {},
      }
      if (this.$route.query?.id) {
        this.WorkFlowGetwfinfo(this.$route.query.id)
        this.info.WorkFlowID = this.$route.query.id
      }
    },
    methods: {
      onAdd(val) {
        console.log(val)
      },
      traverseTree(node) {
        if (!node.childNode) {
          node.node = 'end'
          return
        }
        if (node) {
          for (const ind in node) {
            if (ind === 'conditionNodes') {
              for (let i = 0; i < node[ind].length; i++) {
                node[ind][i].current = 0
                for (const child in node[ind][i]) {
                  if (child === 'childNode') {
                    node[ind][i].parent = node[ind][i].current
                    node[ind][i].current = node[ind][i].current + 1
                    this.traverseTree(node[ind][i])
                  }
                }
              }
            } else {
              if (ind === 'childNode') {
                node[ind].parent = node.current
                node[ind].current = node.current + 1
                this.traverseTree(node[ind])
              }
            }
          }
        }
      },
      // 提交校验
      onSubmit() {
        FlowValidate(this.cnode)
          .then((ret) => {
            this.cnode.current = 0
            this.traverseTree(this.cnode)
            console.log(this.cnode)
            this.addSaveList()
          })
          .catch((err) => {
            console.log(err)
            if (!err.ValidateNodeNames) {
              gp.$baseMessage('存在空节点,请补充')
            } else if (!err.flows) {
              gp.$baseMessage('存在没有审批人的流程!')
            }
          })
      },
      onenter(data) {
        this.nodeData = data
        this.popupshow = false
        console.log(data)
      },
      // 选择节点,打开弹出层
      onChoose(val) {
        this.popupshow = true
        this.nodeData = val.node
        this.conditionsData = val.conditions
      },
      async WorkFlowGetwfinfo(id) {
        const params = {
          wfid: id,
        }
        const data = await WorkFlowGetwfinfo(params)
        if (data.code == '200') {
          console.log(data)
          this.info = data.data.data
          if (data.data.data.flowData) {
            this.cnode = JSON.parse(data.data.data.flowData)
          }
        }
      },
      async addSaveList() {
        const params = {
          Code: this.info.code,
          flowData: JSON.stringify(this.cnode),
          enabled: this.info.enabled,
          descriptions: this.info.descriptions,
          workFlowName: this.info.workFlowName,
          WorkFlowID: this.info.workFlowID,
        }
        const data = await addSaveList(params)
        if (data.code == '200') {
          this.$message({
            message: '保存成功',
            type: 'success',
          })
          this.$router.go(-1)
        }
      },
    },
  })
</script>

<style lang="scss" scoped>
  .mask-popup {
    .mask-popup-div {
      display: flex;
      background: #ffffff;
      height: 100%;
      right: 0;
    }
  }
  .workflow-button {
    position: absolute;
    bottom: 78px;
    width: 100%;
    height: 68px;
    line-height: 68px;
    background: #fff;
    left: 20px;
    text-align: center;
  }
</style>
